<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .sidebar {
            height: 100vh;
            background-color: #263238;
            width: 250px;
            position: fixed;
            left: 0;
            top: 0;
        }
        .main-content {
            background-color: #f8f9fa;
            min-height: 100vh;
            margin-left: 250px;
        }
        .card {
            background-color: #ffffff;
            border-radius: 0.25rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .table-responsive {
            background-color: #ffffff;
        }
        .sidebar .nav-link {
            color: #fff;
            padding: 0.8rem 1.5rem;
        }
        .sidebar .nav-link i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        .sidebar .nav-link:hover {
            background-color: #37474F;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 定义上下文路径变量，供JS文件使用
        var contextPath = '${pageContext.request.contextPath}';
        // 当前登录用户名，供JS判断用
        window.currentUsername = '${user.username}';
    </script>
    <!-- 引入外部JS文件 -->
    <script src="${pageContext.request.contextPath}/MainPage/managePage/userManagement.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- 侧边栏 -->
        <div class="col-auto px-0 sidebar">
            <div class="d-flex flex-column">
                <div class="p-3">
                    <h4 class="text-white">管理系统</h4>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/MainPage/managePage/Management.jsp">
                            <i class="bi bi-house-door"></i> 首页
                        </a>
                    </li>
                    
                    <!-- 检查是否有任何管理权限 -->
                    <c:if test="${not empty permission}">
                        <c:set var="hasAnyManagementPermission" value="false" />
                        <c:forEach var="perm" items="${permission}">
                            <c:if test="${perm == 5 || perm == 6 || perm == 7}">
                                <c:set var="hasAnyManagementPermission" value="true" />
                            </c:if>
                        </c:forEach>
                        
                        <c:if test="${hasAnyManagementPermission}">
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#systemSettingsSubmenu" aria-expanded="true">
                                    <i class="bi bi-gear"></i> 系统设置
                                    <i class="bi bi-chevron-down float-end"></i>
                                </a>
                                <div class="collapse show" id="systemSettingsSubmenu">
                                    <ul class="nav flex-column ms-4">
                                        <!-- 权限5：用户管理 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 5}">
                                                <li class="nav-item">
                                                    <a class="nav-link active text-white" href="#">
                                                        <i class="bi bi-people"></i> 用户管理
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 权限6：角色管理 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 6}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/PermissionManagement.jsp">
                                                        <i class="bi bi-shield-lock"></i> 角色管理
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        
                                        <!-- 权限7：角色分配 -->
                                        <c:forEach var="perm" items="${permission}">
                                            <c:if test="${perm == 7}">
                                                <li class="nav-item">
                                                    <a class="nav-link text-white" href="${pageContext.request.contextPath}/MainPage/managePage/RoleAssignment.jsp">
                                                        <i class="bi bi-person-check"></i> 角色分配
                                                    </a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </li>
                        </c:if>
                    </c:if>
                </ul>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="col main-content">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                <div class="container-fluid">
                    <button class="btn btn-link">
                        <i class="bi bi-list"></i>
                    </button>
                    <div class="ms-auto d-flex align-items-center">
                        <div class="dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle"></i> ${user.username}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/MainPage/managePage/PersonalCenter.jsp"><i class="bi bi-person"></i> 个人信息</a></li>
                                <!-- 删除修改密码入口 -->
                                <!-- <li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> 修改密码</a></li> -->
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="${pageContext.request.contextPath}/API/user/logout"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- 添加面包屑导航 -->
            <nav aria-label="breadcrumb" class="bg-light p-3">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="${pageContext.request.contextPath}/MainPage/managePage/Management.jsp">首页</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#">系统设置</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">用户管理</li>
                </ol>
            </nav>

            <!-- 用户管理内容区域 -->
            <div class="container-fluid p-4">
                <!-- 搜索和工具栏 -->
                <div class="row mb-4">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <!-- 搜索表单中移除角色选择 -->
                                <form class="row g-3" id="searchForm">
                                    <div class="col-auto">
                                        <input type="text" class="form-control" name="username" placeholder="用户名">
                                    </div>
                                    <div class="col-auto">
                                        <select class="form-select" name="status">
                                            <option value="">状态</option>
                                            <option value="1">正常</option>
                                            <option value="0">停用</option>
                                        </select>
                                    </div>
                                    <!-- 删除角色筛选下拉框
                                    <div class="col-auto">
                                        <select class="form-select" name="role_id">
                                            <option value="">角色</option>
                                            <option value="1">读者</option>
                                            <option value="2">作家</option>
                                            <option value="3">管理员</option>
                                        </select>
                                    </div>
                                    -->
                                    <div class="col-auto">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="bi bi-search"></i> 搜索
                                        </button>
                                        <button type="reset" class="btn btn-secondary">
                                            <i class="bi bi-arrow-counterclockwise"></i> 重置
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 用户列表 -->
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-3">
                                    <button class="btn btn-success" id="addUserBtn">
                                        <i class="bi bi-plus-lg"></i> 新增
                                    </button>
                                    <button class="btn btn-danger batch-delete">
                                        <i class="bi bi-trash"></i> 批量删除
                                    </button>
                                    <button class="btn btn-warning">
                                        <i class="bi bi-download"></i> 导出
                                    </button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" style="table-layout: fixed; width: 100%;">
                                        <thead>
                                        <tr>
                                            <th class="text-center" style="width: 5%;">
                                                <input type="checkbox" class="form-check-input" id="selectAll">
                                            </th>
                                            <th class="text-center" style="width: 15%;">用户名称</th>
                                            <th class="text-center" style="width: 10%;">头像</th> <!-- 新增头像列 -->
                                            <th class="text-center" style="width: 20%;">电话号码</th>
                                            <th class="text-center" style="width: 25%;">邮箱地址</th> <!-- 调整宽度 -->
                                            <th class="text-center" style="width: 10%;">状态</th> <!-- 调整宽度 -->
                                            <!-- 删除角色列
                                            <th class="text-center" style="width: 10%;">角色</th>
                                            -->
                                            <th class="text-center" style="width: 15%;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <!-- tbody的内容将由JavaScript动态生成 -->
                                        </tbody>
                                    </table>
                                </div>

                                <!-- 分页 -->
                                <nav>
                                    <ul class="pagination justify-content-end">
                                        <!-- 分页内容将由JavaScript动态生成 -->
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>


</body>
</html>

<!-- 在</body>前添加模态框结构 -->
<!-- 用户信息弹窗 -->
<div class="modal fade" id="userInfoModal" tabindex="-1" aria-labelledby="userInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="userInfoModalLabel">用户详细信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    <li class="list-group-item"><strong>用户名：</strong><span id="modal-username"></span></li>
                    <li class="list-group-item"><strong>电话：</strong><span id="modal-phone"></span></li>
                    <li class="list-group-item"><strong>邮箱：</strong><span id="modal-email"></span></li>
                    <li class="list-group-item"><strong>状态：</strong><span id="modal-status"></span></li>
                    <li class="list-group-item"><strong>角色：</strong><span id="modal-role"></span></li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 在用户详情模态框后添加 -->
<!-- 新增用户弹窗 -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addUserModalLabel">新增用户</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="addUserForm">
                    <div class="mb-3">
                        <label for="add-username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="add-username" name="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="add-password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="add-password" name="password" required>
                    </div>
                    <div class="mb-3">
                        <label for="add-email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="add-email" name="email">
                        <small class="form-text text-muted">请确保邮箱未被其他用户使用</small>
                    </div>
                    <div class="mb-3">
                        <label for="add-phone" class="form-label">电话</label>
                        <input type="text" class="form-control" id="add-phone" name="phone">
                        <small class="form-text text-muted">请确保电话未被其他用户使用</small>
                    </div>
                    <!-- 删除角色选择
                    <div class="mb-3">
                        <label for="add-role" class="form-label">角色</label>
                        <select class="form-select" id="add-role" name="role_id">
                            <option value="1">读者</option>
                            <option value="2">作家</option>
                            <option value="3">管理员</option>
                        </select>
                    </div>
                    -->
                    <div class="mb-3">
                        <label for="add-status" class="form-label">状态</label>
                        <select class="form-select" id="add-status" name="status">
                            <option value="1">正常</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 在新增用户模态框后添加 -->
<!-- 编辑用户弹窗 -->
<!-- 用户信息弹窗 -->
<div class="modal fade" id="editUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑用户信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editUserForm">
                    <div class="mb-3">
                        <label for="edit-username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="edit-username" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="edit-password" class="form-label">新密码（留空不修改）</label>
                        <input type="password" class="form-control" id="edit-password">
                    </div>
                    <div class="mb-3">
                        <label for="edit-email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="edit-email">
                    </div>
                    <div class="mb-3">
                        <label for="edit-phone" class="form-label">电话</label>
                        <input type="tel" class="form-control" id="edit-phone">
                    </div>
                    <div class="mb-3">
                        <label for="edit-status" class="form-label">状态</label>
                        <select class="form-select" id="edit-status">
                            <option value="1">正常</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                    <!-- 新增头像上传字段 -->
                    <div class="mb-3">
                        <label for="edit-avatar" class="form-label">头像</label>
                        <input type="file" class="form-control" id="edit-avatar" name="avatar">
                        <img id="edit-avatar-preview" src="" alt="头像预览" style="max-width: 200px; margin-top: 10px;">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateUserBtn">更新用户</button>
            </div>
        </div>
    </div>
</div>

<!-- 结果提示模态框 -->
<div class="modal fade" id="resultModal" tabindex="-1" aria-labelledby="resultModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resultModalTitle">操作结果</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body" id="resultModalBody">
                <!-- 结果内容将动态插入 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteUserModalLabel">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body" id="deleteUserModalBody">
                <!-- 删除确认内容将动态插入 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteUserBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>
